import React, { useState } from 'react'
import { DownOutlined, SmileOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Dropdown, Space, message } from 'antd'
import Sun from '@/assets/icon/svg/sun.svg'
import Moon from '@/assets/icon/svg/moon.svg'
import defineThemeStore from '@/stores/theme'
import defaultOptions from './defaultOptions'
import './index.css'
const items: MenuProps['items'] = [
  {
    key: '0',
    label: 'light',
    icon: <img src={Sun} className="icon icon-rotate" />
  },
  {
    key: '1',
    label: 'dark',
    icon: <img src={Moon} className="icon" />
  }
]

const ThemeSelector: React.FC = () => {
  const [themeLable, setThemeLable] = useState('light')
  const [Icon, setIcon] = useState(<img src={Sun} className="icon icon-rotate" />)
  const theme = defineThemeStore((state) => state)
  const onClick: MenuProps['onClick'] = ({ key }) => {
    theme.setTheme(defaultOptions[Number.parseInt(key)]['colorPrimary'])
    theme.setLabel(defaultOptions[Number.parseInt(key)]['key'])
    // console.log(defaultOptions[Number.parseInt(key)]['key'])
    setThemeLable(defaultOptions[Number.parseInt(key)]['key'])
    switch (key) {
      case '0':
        setIcon(<img src={Sun} className="icon icon-rotate" />)
        break
      case '1':
        setIcon(<img src={Moon} className="icon" />)
        break
      default:
        break
    }
  }
  return (
    <>
      <Dropdown menu={{ items, onClick }}>
        <div>
          {Icon} {themeLable} <DownOutlined />
        </div>
      </Dropdown>
    </>
  )
}
export default ThemeSelector
